<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车租赁首页</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/online.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css">
    <script src="js/vue-v2.6.10.js"></script>
    <script src="element-ui-2.13.0/lib/index.js"></script>

    <script src="js/axios-0.18.0.js"></script>
</head>
<style>
    .point{
        cursor: pointer;
    }
    .el-input--suffix .el-input__inner {
        padding-right: 47px;
    }
    .buttonSearch {
        position: relative;
        bottom: 68px;
        left: 660px;
    }
    .el-button--primary {
        color: #FFF;
        background-color: #409EFF;
        border-color: #409EFF;
        width: 110px;
        height: 56px;
        font-size: 20px;
        position: relative;
        top: 30px;
    }
</style>

<body>
    <div id="app">
        <!-- 导航菜单 -->
        <nav>
            <div class="main">
                <img src="./img/login/qichezulin.png" alt="" class="logo">
                <ul>
                    <li class="check"><a href="index.html">自驾租车</a></li>
                </ul>
                <div class="search">
                    <div class="left">车型<i class="iconfont icon-down"></i>
                    </div>
                    <input type="text"  v-model= "pagination.carName"  placeholder="搜索感兴趣的内容">
                    <img src="img/public/search.png" alt="" @click="findByPageFront()">
                </div>

                <div class="login" v-show="f1">
                    <a href="pages/loginAndRegister/login.html">登陆</a>
                    /
                    <a href="pages/loginAndRegister/register.html">注册</a>
                </div>

                <div class="user" v-show="f2">
                    <img src="img/login/user.png" alt="">
                    <div class="userlist">
                        <ul>
                            <li>{{member.memberName}}</li>
                            <a :href="'./pages/ordercenter.html?memberId='+member.memberId">
                                <li>订单中心</li>
                            </a>
                            <a href="pages/loginAndRegister/login.html">
                                <li class="out">退出登陆</li>
                            </a>
                        </ul>
                    </div>
                </div>

            </div>
        </nav>

        <!-- 主体内容 -->
        <main>
            <div class="topSearch">
                <template>
                    <div class="block">
                        <span class="demonstration" style="font-size: 16px">取车时间：</span>
                        <el-date-picker
                                v-model="pagination.startDate"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>

                            <el-select v-model="startTime" placeholder="请选择时间">
                                <el-option label="08" value="08"></el-option>
                                <el-option label="09" value="09"></el-option>
                                <el-option label="10" value="10"></el-option>
                                <el-option label="11" value="11"></el-option>
                                <el-option label="12" value="12"></el-option>
                                <el-option label="13" value="13"></el-option>
                                <el-option label="14" value="14"></el-option>
                                <el-option label="15" value="15"></el-option>
                                <el-option label="16" value="16"></el-option>
                                <el-option label="17" value="17"></el-option>
                                <el-option label="18" value="18"></el-option>
                                <el-option label="19" value="19"></el-option>
                                <el-option label="20" value="20"></el-option>
                                <el-option label="21" value="21"></el-option>
                            </el-select>
                        &nbsp&nbsp&nbsp&nbsp
                        <span class="demonstration" style="font-size: 16px">还车时间：</span>
                        <el-date-picker
                                v-model="pagination.endDate"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>

                            <el-select v-model="endTime" placeholder="请选择时间">
                                <el-option label="08" value="08"></el-option>
                                <el-option label="09" value="09"></el-option>
                                <el-option label="10" value="10"></el-option>
                                <el-option label="11" value="11"></el-option>
                                <el-option label="12" value="12"></el-option>
                                <el-option label="13" value="13"></el-option>
                                <el-option label="14" value="14"></el-option>
                                <el-option label="15" value="15"></el-option>
                                <el-option label="16" value="16"></el-option>
                                <el-option label="17" value="17"></el-option>
                                <el-option label="18" value="18"></el-option>
                                <el-option label="19" value="19"></el-option>
                                <el-option label="20" value="20"></el-option>
                                <el-option label="21" value="21"></el-option>
                            </el-select>


                    </div>
                </template>
                <div>&nbsp&nbsp&nbsp&nbsp</div>
                <template>
                    <span class="demonstration" style="font-size: 16px">取车门店：</span>
                    <el-select v-model="pagination.shopName" placeholder="请选择">
                        <el-option label="裕华区店铺" value="裕华区店铺"></el-option>
                        <el-option label="长安区店铺" value="长安区店铺"></el-option>
                    </el-select>
                    &nbsp&nbsp&nbsp&nbsp
                    <span class="demonstration" style="font-size: 16px">还车门店：</span>
                    <el-select v-model="pagination.shopName" placeholder="请选择">
                        <el-option label="裕华区店铺" value="裕华区店铺" ></el-option>
                        <el-option label="长安区店铺" value="长安区店铺" ></el-option>
                    </el-select>
                </template>


            </div>
            <div class="buttonSearch">
                <el-button type="primary" @click="findByPageFront()">查询</el-button>
            </div>

            <div class="row">
                <div class="left">按类型选择</div>
                <div class="right">
                    <ul>
                        <li><a :class="{active:pagination.type==''}" @click= "changeCourseType('')">全部</a></li>
                        <li><a :class="{active:pagination.type=='经济型'}"  @click= "changeCourseType('经济型')">经济型</a></li>
                        <li><a :class="{active:pagination.type=='舒适型'}"  @click= "changeCourseType('舒适型')">舒适型</a></li>
                        <li><a :class="{active:pagination.type=='豪华型'}"  @click= "changeCourseType('豪华型')">豪华型</a></li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="left">按品牌选择</div>
                <div class="right">
                    <ul>
                        <li><a :class="{active:pagination.carBrandName==''}" @click= "changeCarBrand('')">全部</a></li>
                        <li><a :class="{active:pagination.carBrandName=='大众'}"  @click= "changeCarBrand('大众')">大众</a></li>
                        <li><a :class="{active:pagination.carBrandName=='吉利'}"  @click= "changeCarBrand('吉利')">吉利</a></li>
                        <li><a :class="{active:pagination.carBrandName=='奔驰'}"  @click= "changeCarBrand('奔驰')">奔驰</a></li>
                    </ul>
                </div>
            </div>


            <div class="lesson">
                <ul style="text-align:center;">
                    <li v-for = "item in carlist">
                        <div class="top">
                            <a :href="'./pages/carDetail.html?id='+item.id+'&startDate='+pagination.startDate+'&endDate='+pagination.endDate+'&startTime='+startTime+'&endTime='+endTime">
                                <img :src="item.img" alt=""class="m"></a>
                        </div>
                        <div class="bottom">
                            <div class="left">
                                <span style="text-align: left; font-weight: 700;font-size: 16px">{{item.carName}}</span>
                                <p class="time">{{item.type}}|{{item.gears}}|{{item.site}}座 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    {{item.dailyrent}}/日均</p>
                            </div>
                            <div class="right"><a :href="'./pages/carDetail.html?id='+item.id+'&startDate='+pagination.startDate+'&endDate='+pagination.endDate+'&startTime='+startTime+'&endTime='+endTime">立即预约</a></div>
                        </div>
                    </li>
                    
                </ul>
            </div>

            <div class="pageNum">
                <button class="point" @click="changeCurrentPage(1)">首页</button>
                <button class="point" @click="changeCurrentPage(prePage)">上一页</button>
                <ul>
                    <li class = "point" v-for = "page in totalPage" :class="{active:page==pagination.pageIndex}" @click = "changeCurrentPage(page)">{{page}}</li>
                </ul>
                <button class="point" @click="changeCurrentPage(nextPage)">下一页</button>
                <button class="point" @click="changeCurrentPage(totalPage)">尾页</button>
            </div>
        </main>
        <footer>
            <div class="cont">
                <div class="main">
                    <p>
                        首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 |
                        营业执照
                        | 教师资格证公示
                    </p>
                    <p>
                        京ICP备10218183号-1 京ICP证161188号 七易时代科技有限公司 | 地址：北京市大兴区 | 电话：010-66666666 | 京公网安备
                        01010102002533号
                    </p>
                    <p>
                        京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 |
                    </p>
                    <p>在线教育许可证：小优课堂经营许可证20188008号 | 互联网教育服务资格证书：(京)-经营性-2018-0011 |</p>
                </div>
            </div>
        </footer>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            pagination:{
                pageIndex:1,
                pageSize:10,
                type:"",
                carName:"",
                carBrandName:"",
                startDate:"",
                endDate:"",
                shopName:"长安区店铺"
            },
            startTime:"08",
            endTime:"09",
            carlist:"",
            img:"",
            totalCount:"",
            prePage:"",
            nextPage:"",
            totalPage:"",
            carName:"",
            type:"",
            gears:"",
            site:"",
            shopName:"",
            member:"",
            f1:true,
            f2:false,


        },
        methods: {
            findByPageFront(){
                axios.post("/carOrder/selectListByOpenRend",this.pagination).then(resp =>{
                    console.log(resp)
                    this.carlist=resp.data.data.page.list;
                    this.prePage=resp.data.data.page.prePage;
                    this.totalCount=resp.data.data.page.totalCount;
                    this.totalPage = resp.data.data.page.totalPage;
                    this.nextPage=resp.data.data.page.nextPage;
                })
            },
            Date() {
                const nowDate = new Date();
                const date = {
                    year: nowDate.getFullYear(),
                    month: nowDate.getMonth() + 1,
                    date: nowDate.getDate(),
                    hours: nowDate.getHours(),
                    minutes: nowDate.getMinutes(),
                    seconds: nowDate.getSeconds(),
                };

                const newmonth = date.month > 10 ? date.month : "0" + date.month;
                const newday = date.date > 10 ? date.date : "0" + date.date;
                this.pagination.startDate =
                    date.year +
                    "-" +
                    newmonth +
                    "-" +
                    newday;
                this.pagination.endDate =
                    date.year +
                    "-" +
                    newmonth +
                    "-" +
                    newday;

            },
            //改变页码
            changeCurrentPage(page){
                this.pagination.pageIndex=page;
                this.findByPageFront();

            },
            //根据课程类型查询
            changeCourseType(type){
                this.pagination.pageIndex=1;
               if (type==""||type==undefined) {
                   this.pagination.type=""
                   
               }else{
                   this.pagination.type=type;
               }
               this.findByPageFront();

            },
            changeCarBrand(carBrandName){
                this.pagination.pageIndex=1;
                if (carBrandName==""||carBrandName==undefined) {
                    this.pagination.carBrandName=""

                }else{
                    this.pagination.carBrandName=carBrandName;
                }
                this.findByPageFront();
            },
            //模糊查询
            findByCourseName(){
                this.pagination.pageIndex=1;
                this.findByPageFront();
            },
            initParams(){
                var str = window.sessionStorage.getItem("login");
                if(str!=null && str!=""){
                    this.member = JSON.parse(str);
                    this.f2=true;
                    this.f1=false;
                }else{
                    this.f1=true;
                    this.f2=false;
                }
            }
        },
        created() {
            this.findByPageFront();
            this.Date();
        },
        mounted() {
            this.initParams();
        }

    })
</script>

</html>